<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

import {uploadAllocateApi} from '@/service/member.js';

import {getStaffListApi} from '@/service/user.js';
// emit
const emit = defineEmits(['reload']);
const reload = () => {
  emit('reload');
};

const visible = ref(false);

const staffList = ref([]);
// 获取员工列表
const getStaffList = async () => {
  const res = await getStaffListApi();
  if (res.code === 200) {
    staffList.value = res.data;
  } else {
    ElMessage.error(res.msg);
  }
};

// user_id
const user_id = ref(0);
// 要分配的文件id
const file_id = ref(0);

// 打开弹窗
const openDialog = (id) => {
  visible.value = true;
  file_id.value = id;
  user_id.value = '';
  getStaffList();
};

// 关闭弹窗
const closeDialog = () => {
  visible.value = false;
  file_id.value = 0;
  user_id.value = '';
};

// 保存
const handleSave = () => {
  if (user_id.value === 0) {
    ElMessage.error('请选择员工');
    return;
  }
  // 保存
  uploadAllocateApi({
    user_id: user_id.value,
    file_id: file_id.value
  }).then(res => {
    if (res.code === 200) {
      ElMessage.success(res.msg);
      closeDialog();
      reload();
    } else {
      ElMessage.error(res.msg);
    }
  });
}

defineExpose({
  openDialog
});

</script>

<template>
  <el-dialog v-model="visible" title="导入客资分配" width="300px">
    <el-form label-width="100px" label-position="top">
      <el-form-item label="选择员工" prop="user_id">
        <el-select v-model="user_id" placeholder="请选择员工">
          <el-option
            v-for="item in staffList"
            :key="item.id"
            :label="item.realname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="handleSave">分配</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>